<script setup lang="ts">
// import { onMounted, ref, shallowRef } from "vue";
// import { ApiStudent } from "../../api";
import { useStudentStore } from "../../store";
import { useDictionaryStore } from "../../store";
import { storeToRefs } from "pinia";
import StudentAdd from "./StudentAdd.vue";
import { ref } from "vue";
import StudentUpdate from "./StudentUpdate.vue";
import StudentAssign from "./StudentAssign.vue";
import { TableInstance } from "element-plus";
import StudentAvatar from "./StudentAvatar.vue";
import { exportDataToExcel } from "../../utils/exportExcel";


const {model,list,classRoomList}=storeToRefs(useStudentStore())

const {queryHandler}=useStudentStore()
const{quslificationList}=storeToRefs(useDictionaryStore())

const changeHandler=(currentPage:number,pageSize:number)=>{
  model.value.begin = (currentPage - 1) * pageSize;
 queryHandler()
}
const addRef=ref<InstanceType<typeof StudentAdd>>()
const updateRef=ref<InstanceType<typeof StudentUpdate>>()
const assignRef=ref<InstanceType<typeof StudentAssign>>()
const avatarRef=ref<InstanceType<typeof StudentAvatar>>()
const assign = ref<TableInstance>()
const imgShow=ref<boolean>(false)
const imageUrl=ref<string>()
const exportExcel=()=>{
    exportDataToExcel(list.value?.list || [])
}

// 假设这是你的数据处理逻辑
function processTableData(originalData: any[]): any[] {
  return originalData.map(row => ({
    ...row,
    stu_sex: row.stu_sex === 1 ? '男' : '女',
    //@ts-ignore
    stu_cls_id: classRoomList?.find((item:any) => item.cls_id === row.stu_cls_id)?.cls_name ?? '无班级',
    stu_qualification: getQualificationText(row.stu_qualification),
  }));
}

function getQualificationText(qualification: number): string {
  switch (qualification) {
    case 1:
      return '本科及以上';
    case 2:
      return '大专';
    case 3:
      return '高中及以下';
    default:
      return '';
  }
}
</script>

<template>
    <el-form ref="form" :model="model" label-width="80px">
        <el-form-item label="学生姓名">
            <el-input v-model="model.stu_name" placeholder="请输入要搜索的名字"></el-input>
        </el-form-item>
        <el-form-item label="所在班级">
            <el-select v-model="model.stu_cls_id" style="width: 120px;">
                <el-option label="--请选择--" :value="0"></el-option>
                <el-option v-for="item in classRoomList" :key="item.cls_id" :label="item.cls_name" :value="item.cls_id">
                </el-option>
            </el-select> 
        </el-form-item>
        <el-form-item label="学生学历">
            <el-select v-model="model.stu_qualification" style="width: 120px;">
                <el-option label="--请选择--" :value="0"></el-option>
                <el-option v-for="item in quslificationList" :key="item.dic_id" :label="item.dic_name" :value="item.dic_id">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item >
            <el-button type="primary" @click="queryHandler">查询</el-button>
        </el-form-item>
        <el-form-item >
            <el-button type="primary" @click="addRef?.begin()">新增</el-button>
        </el-form-item>
        <el-form-item >
                <el-button type="primary" @click="assignRef?.begin(assign?.getSelectionRows().map((item:UI.List) => item.stu_id),0)">批量分班</el-button>
        </el-form-item>
        <el-form-item >
            <el-button type="primary" @click="exportExcel">导出学生信息</el-button>
        </el-form-item>
       
    </el-form>
<el-table ref="assign" :data="list?.list" style="width: 100%">
    <el-table-column type="index" label="序号" width="60" aligin="center" fixed></el-table-column>
    <el-table-column type="selection"  width="60" aligin="center" fixed></el-table-column>
    <el-table-column prop="stu_name" label="姓名" width="100" aligin="center" fixed></el-table-column>
    <el-table-column prop="stu_cls_id" label="班级" width="120" aligin="center">
        <template #default="scoped">
            {{ classRoomList?.find((item) => item.cls_id == scoped.row.stu_cls_id)?.cls_name?? '无班级' }}
        </template>
    </el-table-column>
    <el-table-column prop="stu_avatar" label="存档图片" width="80" aligin="center">
        <template #default="scoped">
            <el-button type="text" @click="imageUrl='http://localhost:3002'+scoped.row.stu_avatar,imgShow=true" >预览</el-button>
        </template>
    </el-table-column>
    <el-table-column prop="stu_sex" label="性别" width="80" aligin="center">
        <template #default="scoped">
            {{  scoped.row.stu_sex===1?'男':'女'}}
        </template>
    </el-table-column>
    <el-table-column prop="stu_phone" label="联系电话" width="150" aligin="center"></el-table-column>
    <el-table-column prop="stu_phone2" label="联系电话2" width="150" aligin="center"></el-table-column>
    <el-table-column prop="stu_born" label="出生日期" width="150" aligin="center"></el-table-column>
    <el-table-column prop="stu_qualification" label="学历" width="90" aligin="center">
        <template #default="scoped">
            <el-tag v-if="scoped.row.stu_qualification==1" type="success">本科及以上</el-tag>
            <el-tag v-else-if="scoped.row.stu_qualification==2" type="info">大专</el-tag>
            <el-tag v-else-if="scoped.row.stu_qualification==3" type="warning">高中及以下</el-tag>
        </template>
    </el-table-column>
    <el-table-column prop="stu_school" label="毕业院校" width="100" aligin="center"></el-table-column>
    <el-table-column prop="stu_major" label="专业" width="100" aligin="center"></el-table-column>
    <el-table-column prop="stu_address" label="家庭住址" width="150" aligin="center"></el-table-column>
    <el-table-column prop="stu_remark" label="备注" width="150" aligin="center"></el-table-column>
    <el-table-column label="操作" width="400" aligin="center" fixed="right">
        <template #default="scoped">
            <el-button type="primary" @click="assignRef?.begin(scoped.row.stu_id, scoped.row.stu_cls_id)">分班</el-button>
            <el-button type="primary" @click="avatarRef?.begin(scoped.row)">图片存档</el-button>
            <el-button type="primary" @click="updateRef?.begin(scoped.row)">编辑</el-button>
            <el-button type="primary">删除</el-button>
        </template>
    </el-table-column>
</el-table>
<el-image-viewer v-if="imgShow" :url-list="[imageUrl]" @close="imgShow=false"/>
<div class="page">
    <el-pagination 
    layout="prev, pager, next,->,sizes,total" 
    :total="list?.total"
    v-model:page-size="model.pageSize"
    :page-sizes="[1,3,5,7,9,20]"
    @change="changeHandler"
    >
    </el-pagination>
</div>
<student-add ref="addRef" @save="queryHandler"></student-add>
<student-update ref="updateRef" @save="queryHandler"></student-update>
<student-assign ref="assignRef" @save="queryHandler"></student-assign>
<student-avatar ref="avatarRef" @save="queryHandler"></student-avatar>
</template>

<style scoped lang="scss"> 
.el-form{
    display: flex;
}
.page{
    position: absolute;
    bottom:20px;
    width: calc(100% - 40px);
}
</style>
